<script setup lang="ts">
import { ref } from "vue";
import WikiMgr from "./components/WikiMgr.vue";
import EditorBase from "./components/EditorBase.vue";

let nodeData = ref({});
const handleNodeClick = (node: object) => {
  nodeData.value = node;
};
</script>

<template>
  <div
    style="height: 100%; box-shadow: var(--el-border-color-light) 0px 0px 10px"
  >
    <el-splitter layout="horizontal">
      <el-splitter-panel :min="200">
        <WikiMgr :node-click="handleNodeClick" />
      </el-splitter-panel>
      <el-splitter-panel :min="200">
        <EditorBase :node-data="nodeData" />
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<style scoped>
.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
